import {
  createRouter,
  createWebHistory,
  createWebHashHistory,
} from "vue-router";

import Home from "../pages/home/Index.vue";
import Classify from "../pages/classify/Index.vue";
import Cart from "../pages/cart/Index.vue";
import Mine from "../pages/mine/Index.vue";
import Mine2 from "../pages/mine2/Index.vue";
import Detail from "../pages/detail/Index.vue";
import NotFound from "../pages/notFound/Index.vue";

import Hot from "../pages/home/hot/Index.vue";
import Cinema from "../pages/home/cinema/Index.vue";

// 创建路由实例
const router = createRouter({
  // 历史模式
  // 历史模式url上面是没有#号，看起来好看
  // 当我们项目在本地运行的时候，没有任何区别
  // 当我们项目在打包以后放在服务器上运行的时候，会出现刷新以后404的问题
  // history: createWebHistory(import.meta.env.BASE_URL),

  // hash模式
  history: createWebHashHistory(import.meta.env.BASE_URL),
  routes: [
    // 重定向
    {
      path: "/",
      redirect: "/home",
    },
    {
      path: "/home",
      component: Home,
      // 嵌套路由，使用children属性
      children: [
        {
          path: "/home",
          redirect: "/home/hot",
        },
        {
          path: "/home/hot",
          component: Hot,
        },
        {
          path: "cinema",
          component: Cinema,
        },
      ],
    },
    {
      path: "/classify",
      component: Classify,
    },
    {
      path: "/cart",
      name: "cart",
      component: Cart,
      // alias表示别名，添加另一个路径
      alias: "/gouwuche",
    },
    {
      // 命名视图
      path: "/mine",
      // component: Mine,
      components: {
        a: Mine,
        b: Mine2,
      },
    },
    // 动态路由
    // 路由传参(页面跳转之间的传参)
    {
      path: "/detail/:id",
      component: Detail,
      // props: true的作用  this.$route.params.id -> props: ["id"]
      props: true,
    },
    // 404页面
    {
      path: "/:pathMatch(.*)*",
      component: NotFound,
      // redirect: "/home",
    },
  ],
});

// 暴露路由实例
export default router;
